<template>
    <div>
         <div>
            <Row :gutter="16" class="on-site-v3">
                <i-col :xs="4" :md="4" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 135px;padding-bottom: 20px;">
                  <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="59">
                    <count-to :end="noticeList1[infor.value]" count-class="count-style" style="margin-top: -10px; font-size: 40px;"/>
                    <p>{{ infor.title }}</p>
                  </infor-card>
                </i-col>
            </Row>
         </div>
        <div style="height: 400px">
            <Row :gutter="16" class="on-site-v3">
                <Col span="8">
                    <Card class="notice-v3">
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            通知公告
                        </p>
                        <a href="#" slot="extra" @click.prevent="toMessage()" class="notice-more">查看更多</a>
                        <Collapse accordion simple>
                          <Panel v-for="(item, index) in noticeList" v-bind:key="index"
                                 on-change="toMessage('message')">
                            {{ item.title }}
                            <p slot="content" @click.prevent="toMessage('message')">{{ item.content }}</p>
                          </Panel>
                        </Collapse>
                    </Card>
                </Col>
                <Col span="16">
                    <Card>
                        <my-chart-bar style="height: 300px;" :value="barData" :run="run" text="近七日工作量"/>
                    </Card>
                </Col>
            </Row>

        </div>

    </div>
</template>

<script>

import { MyChartBar } from '@/components/charts'
import InforCard from '@/components/info-card'
import CountTo from '@/components/count-to'
import { releaseNoticeList, getSevenCountList, getApplyUserNum } from '@/api/stree'

export default {
  components: {
    MyChartBar,
    InforCard,
    CountTo
  },
  data () {
    return {
      noticeList: [],
      noticeList1: {
        'newly_nursing_subsidy_num': 0,
        'existing_life_subsidy_num': 0,
        'newly_life_subsidy_num': 0,
        'existing_nursing_subsidy_num': 0
      },
      barData: {
        legend: [ '接件量', '办结量' ],
        xAxis: ['1', '2', '3', '4', '5', '6', '7'],
        xAxisMap: {},
        seriesData: [
          { name: '接件量', data: [ ], type: 'bar' },
          { name: '办结量', data: [ ], type: 'bar' }
        ]
      },
      run: '1',
      inforCardData: [
        { title: '现有重度残疾人护理补贴人数', value: 'existing_nursing_subsidy_num', icon: 'ios-bookmark', color: '#2d8cf0' },
        { title: '现有困难残疾人生活补贴人数', value: 'existing_life_subsidy_num', icon: 'md-bookmarks', color: '#19be6b' },
        { title: '本月新增护理补贴人数', value: 'newly_nursing_subsidy_num', icon: 'ios-person-add-outline', color: '#ff9900' },
        { title: '本月新增生活补贴人数', value: 'newly_life_subsidy_num', icon: 'md-person-add', color: '#ed3f14' }
      ]
    }
  },
  methods: {
    show () {
      releaseNoticeList().then(res => {
        console.log(888888)
        console.log(res.data.data)
        this.noticeList = res.data.data
      })
    },
    getCompoundNum () {
      getApplyUserNum().then(res => {
        console.log(res, '测试')
        if (res.data.errcode === 0) {
          this.noticeList1 = res.data.data
          console.log(res.data.data, '测试200')
        } else {
          this.noticeList1 = {
            'newly_nursing_subsidy_num': 0,
            'existing_life_subsidy_num': 0,
            'newly_life_subsidy_num': 0,
            'existing_nursing_subsidy_num': 0
          }
        }
      })
    },
    orderWorkCountList () {
      let dateKu = this.barData
      getSevenCountList().then(ret => {
        console.log('于淼')
        console.log(ret.data)
        let data = ret.data
        let dat1 = []
        let dat2 = []
        let forData = dateKu.xAxisMap
        if (data.errcode === 0) {
          for (let item1 in forData) {
            let num_j = 0
            let num_b = 0
            data.data.forEach(function (item, index) {
              if (item1 === item.day) {
                num_b = item.finish
                num_j = item.receive
              }
            })
            dat1[forData[item1]] = num_b
            dat2[forData[item1]] = num_j
          }
          dateKu.seriesData = [
            { name: '接件量', data: dat2, type: 'bar' },
            { name: '办结量', data: dat1, type: 'bar' }
          ]
          this.barData = dateKu
          console.log(this.barData.seriesData)
          this.run = '2'
        }
      })
    },
    date2str (date) {
      if (!date) {
        return ''
      }
      var time1 = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      time1 += '-' + (month < 10 ? '0' + month : month)
      time1 += '-' + (day < 10 ? '0' + day : day)
      return time1
    },

    toMessage () {
      this.$router.push({
        name: 'message',
        params: ''
      })
    }
  },
  mounted () {
    this.getCompoundNum()
    let day = new Date()
    let barData = this.barData
    for (let i = 6; i >= 0; i--) {
      let temp = this.date2str(day)
      barData.xAxis[i] = temp.substring(5)
      barData.xAxisMap[temp] = i
      day.setDate(day.getDate() - 1)
    }
    this.show()
    this.orderWorkCountList()
  }

}
</script>

<style scoped>
    .dian {
        list-style: none;
    }
</style>
